<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>状态任务栏</title>
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    #box{
        width:650px;
        margin:auto;
        padding-top:20px;
    }
    ul li{
        width:650px;
        height:40px;
        list-style: none;
        border:1px solid #ccc;
        border-top:0;
        text-align:center;
        padding-top:15px;
        font-size:14px;
    }
    li span{
        display: inline-block;
        width:500px;
    }
    button{
        margin-left:10px;
        color:white;
        outline: none;
        border: none;
        padding:4px;
        font-size:12px;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover{
        color:#999;
        background-color: #ccc;
    }
    input{
        width:620px;
        height:20px;
        padding:15px;
        border:1px solid #9b9b9b;
        margin-top:30px;
        ime-mode:disabled;
    }
    .s1{
        background: rgb(255, 245, 250);
    }
    .s2{
        background: rgb(255, 249, 237);
    }
    .s3{
        background: rgb(238, 250, 255);
    }
    .b1{
        background: rgb(248, 179, 208);
    }
    .b2{
        background: orange;
    }
    .b3{
        background: rgb(187, 225, 241);
    }
    #arr{
        display: none;
    }
    .x{
        display:flex;
        flex-wrap: wrap;
    }
    .x li{
        width:214.675px;
    }
    .x span{
        display: inline;
    }
</style>
<body>
    <div id="container"></div>
    <template id="root">
        <div id="box">
            <el-popover
            placement="top-start"
            title="任务列表的用法"
            width="550"
            trigger="click"
            content="一.输入内容(不可为纯数字),
                    按“1/2/3” 分别添加“未完成/进行中/已完成”的任务。
                    注意！！若在按下“未完成”按钮后添加任务，按“1/2/3”添加会切换到对应的列表。
                    二.用v-show有一个缺点，就是在按下“未完成”按钮的状态下进行删除事件，因为索
                    引号的错乱会导致删除的对象发生错误，本实例实现了在上述状态下也能够正确的删除。
                    三.在按下“未完成”按钮后更改任务状态，也可以正确更改。
                    ">
            <el-button slot="reference">点我看用法啦！</el-button>
            </el-popover>
            <button class="b1" @click='isdo(0)' :id='0'>未完成</button>
            <button class="b2" @click='isdo(1)' :id='1'>进行中</button>
            <button class="b3" @click='isdo(2)' :id='2'>已完成</button>
            <button @click="reset()" id="listBtn">返回任务列表</button>
            <button @click="cut()">切换排列方式</button>
            <input type="text" @keyup='add($event)' v-model.trim="content" placeholder="写下你的计划叭！">
            <m-list :data='lists2' :type='type' :num='num'>
                <div slot-scope='{row}'>
                    <span>{{row.val.doing}}</span>
                    <select v-model='row.val.status' @click='sel($event)'>
                        <option value="0">未完成</option>
                        <option value="1">进行中</option>
                        <option value="2">已完成</option>
                    </select>
                    <button @click='del(row.index)' :class='{b1:row.val.status==0,b2:row.val.status==1,b3:row.val.status==2}'>删除</button>
                </div>
            </m-list>
        </div>
    </template>
    <template id="list">
        <ul id="lists" :class="type">
            <li v-for='(val,index) in data' :class='{s1:val.status==0,s2:val.status==1,s3:val.status==2}'>
                <slot :row='{index,val}'></slot>
            </li>
        </ul>
    </template>
</body>
<script>
    Vue.component('m-list',{
        template:'#list',
        props:['data','type','num'],
    })
    var vm=new Vue({
        el:'#container',
        template:'#root',
        data:{
            type:'y',
            num:-1,
            lists:[
                {
                    status:0,
                    doing:'吃饭',
                },
                {
                    status:1,
                    doing:'睡觉',
                },{
                    status:2,
                    doing:'打豆豆',
                },{
                    status:2,
                    doing:'看漫画',
                },{
                    status:0,
                    doing:'看动漫',
                },{
                    status:1,
                    doing:'窝被窝',
                }
            ],
            content:'',
            lists2:[],
        },
        created(){
            this.lists2=this.getLists(-1);
        },
        methods:{
            add(e){
                var str=e.target.value;
                var num=Number(str.slice(str.length-1));
                if(Number(str)==str){
                    this.content='';
                    return;
                }else if(num==1||num==2||num==3){
                    if(str.slice(str.length-2,str.length-1)==' '||str.slice(str.length-2,str.length-1)==''){
                        this.content='';
                        return;
                    }
                    let obj={
                        status:num-1,
                        doing:this.content.slice(0,this.content.length-1),
                    };
                    this.lists.push(obj);
                    this.content='';
                    this.lists2=this.getLists(-1);
                    if(this.num==-1){
                        return;
                    }else{
                        this.isdo(num-1);
                    }
                }
            },
            del(index){
                var a=this.lists2.slice(index,index+1)[0];
                this.lists2.splice(index,1);
                this.lists=this.lists.filter((val,index)=>{
                   return val.doing!==a.doing;
                })

            },
            isdo(num){
                this.num=num;
                this.lists2=this.getLists(this.num);
            },
            reset(){
            this.num=-1;
            this.lists2=this.getLists(this.num);
            },
            cut(){
                if(this.type=='x'){
                    this.type='y';
                }else{
                    this.type='x';
                }
            },
            getLists(num){
                return this.lists.filter((val,index)=>{
                    return val.status==num||this.num==-1;
                })
            },
            sel(e){
                this.getLists(e.target.value);
                this.isdo(this.num);
            }
        }
    });
</script>
</html>